<script setup lang='ts'>
import { onMounted, ref, reactive } from 'vue'
import type { FormInst,FormItemRule } from 'naive-ui'
import { useMessage } from "naive-ui"
import { TablecutStore } from '@/stores/modules/table-cut'

const tablecutStore = TablecutStore()
const message = useMessage()

onMounted(async () => {
	await tablecutStore.getcutList()
})
const showModalRef = ref(false)

// 新增
const doAdd = () => {
	Object.assign(ruleForm, { cut: "", min: "", max: "", _id: 0 });
	showModalRef.value = true
}

// 表单验证
const formRef = ref<FormInst>()

const ruleForm = reactive({});
const rules = ({
	cut: { required: true, trigger: ['blur', 'input'], message: '请输入桌型' },
	min: [
		{ required: true, trigger: ['blur', 'input'], message: '请输入' },
		// {
		// 	required: true, trigger: ['blur'],
		// 	validator(rule: FormItemRule, value: string) {
		// 		return new Promise<void>(async (resolve, reject) => {
		// 			if (ruleForm.min > ruleForm.max) {
		// 				reject(Error('请输入正确的人数!!'))
		// 			} else {
		// 				resolve()
		// 			}
		// 		})
		// 	},
		// }
	],
	max: [
		{ required: true, trigger: ['blur', 'input'], message: '请输入' },
		{
			required: true, trigger: ['blur'],
			validator(rule: FormItemRule, value: string) {
				return new Promise<void>(async (resolve, reject) => {
					if (ruleForm.min*1 > ruleForm.max*1) {
						reject(Error('请输入正确的人数!!'))
					} else {
						resolve()
					}
				})
			},
		}
	],
})

// 确认
const onPositiveClick = () => {
	formRef.value?.validate(async (errors) => {
		if (!errors) {
			if(ruleForm.min*1 < ruleForm.max*1){
				await tablecutStore.SavecutList(ruleForm)
				tablecutStore.getcutList()
				showModalRef.value = false
			}else{
				alert('请输入正确的人数')
			}
		} else {
		    showModalRef.value = true
		    message.error('信息不能为空！')
		}
	});
}
// 取消
const onNegativeClick = () => {
	showModalRef.value = false
}

// 编辑(修改)
const ModifyCut = (row) => {
	Object.assign(ruleForm, { ...row }) // 合并
	showModalRef.value = true
	tablecutStore.getcutList()
}

// 删除
const DeleteCut = async (_id: String) => {
	await tablecutStore.Deletecut(_id)
	tablecutStore.getcutList()
}

//高度自适应
let autoTableHeight = ref(null);
const autuHeight = (height) => {
	autoTableHeight.value = window.innerHeight - height;
	window.onresize = () => {
		autoTableHeight.value = window.innerHeight - height;
	};
	return autoTableHeight.value;
}

</script>

<template>
	<n-layout>
		<n-layout-header>
			<n-space class="box-nav" justify="start">
				<n-button color="#ccc" text>台桌设置</n-button>
				<n-button text>/</n-button>
				<n-button text>桌型设置</n-button>
			</n-space>
		</n-layout-header>
		<n-layout :max-height="autuHeight(410)" :style="{maxHeight:'800px'}" class="content" id="content" has-sider>
			<n-grid x-gap="12" :cols="4">
				<n-gi>
					<n-button class="button" @click="doAdd">+添加桌型</n-button>
				</n-gi>
				<n-gi v-for="item in tablecutStore.list " v-show="item">
					<div class="desk-box">
						<div class="desk-top">{{item.cut}} ({{item.min}}-{{item.max}}人)</div>
						<div class="desk-bottom">
							<n-button id="btn" @click="ModifyCut(item)" class="desk-btn">编辑</n-button>
							<n-popconfirm
							    positive-text="确定"
							    negative-text="取消"
									style="width: 200px;"
							    @positive-click="DeleteCut(item._id)"
							    @negative-click="handleNegativeClick"
							  >
							    <template #trigger>
							      <n-button id="btn" class="desk-btn">删除</n-button>
							    </template>
							    确定要删除吗？
							  </n-popconfirm>
						</div>
					</div>
				</n-gi>
			</n-grid>
		</n-layout>
	</n-layout>

	<!-- 添加桌型 -->
	<n-modal :mask-closable="false" v-model:show="showModalRef" :title="ruleForm._id ? '修改桌型':'添加桌型'" auto-focus="true" preset="dialog" positive-text="确认" negative-text="取消"
		@positive-click="onPositiveClick" @negative-click="onNegativeClick">
		<n-form ref="formRef" :model="ruleForm" :rules="rules" label-placement="left" label-width="auto"
			require-mark-placement="right-hanging" :size="size" :style="{maxWidth: '640px'}">
			<n-form-item label="桌位类型" path="cut">
				<n-input v-model:value="ruleForm.cut" auto-focus="true" placeholder="如 小桌 大桌" />
			</n-form-item>
			<n-form-item label="最少人数" path="min">
				<n-input v-model:value="ruleForm.min" placeholder="小桌最少 1人，大桌最少5人" />
			</n-form-item>
			<n-form-item label="最多人数" path="max">
				<n-input v-model:value="ruleForm.max" placeholder="小桌最多5人，大桌最多10人" />
			</n-form-item>
		</n-form>
	</n-modal>

</template>

<style scoped>

#content {
	margin-top: 35px;
	height: 400px;
}

.n-dialog .n-dialog__content {
	margin-top: 30px;
}

.desk-btn {
	width: 115px;
	border-radius: 0px;
	border: none;
	font-size: 12px;
}

#btn {
	margin-right: 0;
}

.desk-bottom {
	display: flex;
	justify-content: space-between;
}

.desk-top {
	width: 100%;
	height: 70px;
	line-height: 70px;
	text-align: center;
	background-color: #e9eff5;
	font-size: 20px;
	letter-spacing: 2px;
	color: #666666;
}

.desk-box {
	width: 230px;
	height: 103px;
	/* border: 1px solid #ccc; */
	/* border-radius: 4px; */
}

.button {
	width: 230px;
	height: 105px;
	color: #ccc;
	font-size: 20px;
}

.box-nav {
	width: 100%;
	height: 45px;
	background-color: #e9eff5;
	line-height: 45px;
	padding-left: 20px;
}

.n-button {
	margin-right: 9px;
}

.content {
	padding-top: 30px;
	/* border: 1px solid #fafafc; */
	padding-bottom: 20px;
	padding-left: 20px;
}

.sp-nav {
	padding: 3px 0 0 10px;
	display: flex;
	justify-content: space-between;
}

</style>